<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:m="http://code.google.com/p/gmaps4jsf/">
    <script
        src="http://maps.google.com/maps?file=api&amp;v=2&amp;
        key=ABQIAAAAxrVS1QxlpJHXxQ2Vxg2bJBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxS9AOPy_YJl48ifAy4mq6I8SgK8fg"
        type="text/javascript">
    </script>
    <h:head>
        <script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/yuiloader/yuiloader.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <m:resources key="ABQIAAAAD6cDv-a0AnpzXA4gj6utCRTUlDOzA1Sd8h2eDxLDJEZUtkHZ_xQlPmNUQ-At6YLqCd29cGkwT8i95A"/>
        <title>Principal</title>
        <link rel="stylesheet" href="estilo.css" />
    </h:head>
    <h:body>
        <div id="banner">
            <h1><span class="Estilo1">Glogal Observing System-Pagina Principal</span><h2><span class="Estilo2">Bienvenido <h:outputText value="#{faces.name}-#{faces.tipoUsuario}"/> </span></h2></h1>
        </div>

        <h:form id="mapa" >
            Seleccione los puntos
            <m:map width="500px" height="500px" latitude="#{faces.latitude}" longitude="#{faces.longitude}" jsVariable="map1" zoom="2">
                <m:marker latitude="#{faces.latitude}" longitude="#{faces.longitude}" jsVariable="marker1" draggable="true">
                    <m:icon shadowImageURL="http://www.google.com/mapfiles/shadow50.png"
                            imageURL="http://www.google.com/mapfiles/markerA.png"/>
                </m:marker>               
            </m:map>
            <h:commandButton value="CargarPredicion" action="#{faces.generarPronostico}"/>           
            
        </h:form>





        <div id="Navegacion">
            <h3>Navegacion</h3>
            <li><h:outputLink value="alertas.xhtml"> Alertas </h:outputLink></li>            
            <li><h:outputLink value="oraculo.xhtml"> Oraculo </h:outputLink></li>
            <li><h:outputLink value="agregarSitio.xhtml"> Agregar Sitio </h:outputLink></li>
            <h3>Usuario</h3>
            <li><h:outputLink value="index.xhtml"> Cerrar Sesion </h:outputLink></li>
            <li><h:outputLink value="editarUsuario.xhtml"> Editar </h:outputLink></li>
            <li><h:outputLink value="borrarUsuario.xhtml"> Borrar </h:outputLink></li>
        </div>

        <div id="mapaImagen">
            Reporte Clima <br></br>
            <h:outputText value="Estado: #{faces.pronostico}" rendered="#{faces.pronostico ne null}"/>
            <h:graphicImage value="imagenes/#{faces.imagenPronostico}" rendered="#{faces.imagenPronostico ne null}"/>
        </div>
    </h:body>
</html>




